<script setup>
import {ref} from 'vue'
const navList=ref(["音乐","播客","动态"])
const myPlayList=ref([])
const myProfile=ref([])
const showLeft=ref()
const childrenRef=ref()
const getProfile=()=>{
	uni.request({
		url: 'http://localhost:3008/myProfile',
		method: 'GET',
		data: {},
		success: res => {
			myProfile.value=res.data
			console.log(myProfile.value);
		},
		fail: () => {},
		complete: () => {}
	})
}
const getMyPlayList=()=>{
	uni.request({
		url: 'http://localhost:3008/myPlayList',
		method: 'GET',
		data: {},
		success: res => {
			myPlayList.value=res.data
		},
		fail: () => {},
		complete: () => {}
	})
}
const goToSearch=()=>{
	uni.navigateTo({
		url:'/pages/search/search'
	})
}
const showDrawer=()=>{
	showLeft.value.open()
	// console.log(showLeft);
}
const closeDrawer=()=>{
		showLeft.value.close()
}
const open=()=>{
	childrenRef.value.open('bottom')
}
getProfile()
getMyPlayList()
</script>
<template>
	<view class="container">
		<view class="header">
			<view class="header-top">
				<img src="../../static/更多.png" style="margin-left:10px;" @click="showDrawer"/>
				<span>+&nbsp;添加状态</span>
				<view class="search">
					<img src="../../static/搜索.png" alt="" @click="goToSearch"/>
					<img src="../../static/更多1.png" alt="" />
				</view>				
			</view>
			<view class="header-intro">
				<img src="../../static/tx.jpg" alt="" />
				<span class="sp">{{myProfile[0].nickname}}</span>
				<view class="header-acheivemnt">
					<span>{{myProfile[0].num}}枚勋章</span>
					<span>&nbsp;&nbsp;|&nbsp;&nbsp;{{myProfile[0].address}}&nbsp;&nbsp;.</span>
					<span>村龄{{myProfile[0].age}}年</span>
				</view>
				<view class="header-detail">
					<span>{{myProfile[0].concern}}关注</span>
					<span>{{myProfile[0].address}}</span>
					<span>{{myProfile[0].level}}等级</span>
					<span>{{myProfile[0].hours}}时听歌</span>
				</view>
			</view>
			<view class="header-bottom">
				<view><img style="padding-top:5px" src="../../static/recent.png" /><span>最近</span></view>
				<view><img src="../../static/download.png" /><span>本地</span></view>
				<view><img src="../../static/upload.png" /><span>云盘</span></view>
				<view><img src="../../static/bought1.png" /><span>已购</span></view>
				<view style="width: 40px;"></view>
			</view>
		</view>
		
		
		<view class="main-content">
			<view class="nav">
				<ul>
					<li class="active">音乐</li>
					<li>播客</li>
					<li>动态</li>
					<!-- <li v-for="item in navList">{{item}}</li> -->
				</ul>
			</view>
			
			<view class="sub-nav">
				<span class="sub-active">近期</span>
				<span>创建</span>
				<span>收藏</span>
				<span>专辑</span>
			</view>
			
			<view class="music-list" v-for="item in myPlayList">
				<img :src="item.img" alt="">
				<view class="content">
					<view class="list-name">{{item.listName}}</view>
					<view>
						<span>{{item.num}}&nbsp;&nbsp;.&nbsp;&nbsp;</span>
						<span>{{item.by}}</span>
					</view>
				</view>
			</view>
		</view>
		<bottomBar @click="open()"></bottomBar>
		<uni-drawer :width="320" mode="left" ref="showLeft" >
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<drawer></drawer>
				</scroll-view>
			</view>
		</uni-drawer>
		<uni-popup ref="childrenRef" background-color="#1b1b23"  type="bottom">
			<popup></popup>
		</uni-popup>
	</view>
</template>

<style scoped>
*{
	margin:0 auto;
}
.container{
	background-color: #766168;
}
 .header{
	 display: flex;
	 flex-direction: column;
	 text-align: center;
 }
 .header-top{
	 margin-left:0px ;
	 margin-right:0px ;
	 line-height: 30px;
	 display: flex;
	 justify-content: space-between;
 }
 .header-top img{
	 width: 30px;
	 height:30px;
	 margin: auto 10px;
 }
 .header-top .search{
	 width: 100px;
	 margin-right: 0;
	 margin-left: 0;
 }
 .header-top span{
 	 font-size: 14px;
	 color:#e7dce0;
	 width: 100px;
	 line-height: 30px;
 }
 .header-intro{
	 display: flex;
	 flex-direction: column;
	 margin-top: 40px;
 }
 .header-intro img{
	 width:80px;
	 height:80px;
	 border-radius: 50%;
	 margin: 8px auto;
 }
 .header-intro .sp{
	 margin: 0px auto;
	 color:#e7dce0;
 }
.header-acheivemnt{
	 margin:5px auto;
	 font-size: 12px;
	 color: #e8d9de;
	 /* color:#e7dce0; */
 }
 .header-detail{
	 margin:3px auto;
	 color:#e7dce0;
 }
 .header-detail span{
	 font-size: 12px;
	 margin: auto 10px;
 }
 .header-bottom{
	 width:100%;
	 display: flex;
	 margin-top:10px;
 }
 .header-bottom view{
	 border-radius: 8px;
	 background-color:  #8a797f;
	 height: 40px;
	 width: 80px;
	 line-height: 40px;
 }
 .header-bottom img{
	 width:20px;
	 height: 20px;
 }
 
 
 /* main-content */
 .main-content{
	 margin-top: 30px;
	 background-color:#1b1b23;
	 border-radius: 20px;
	 /* height: 1050px; */
	 color:lightgray;
	 margin-bottom: 50px;
 }
 .nav ul{
	 display: flex;
	 justify-content: space-around;
	 flex-direction: row;
	 list-style: none;
	 font-size: 22px;
	 padding: 0px;

 }
 .nav li{
	  padding-top:10px;
	  padding-bottom: 5px;
 }
 .active{
	 color: #fff;
	 border-bottom: 2px solid red;
 }
  .sub-active{
		color: #fff;
 }
 .sub-nav{
	 padding-top: 10px;
	 margin-bottom: 10px;
 }
 .sub-nav span{
	 margin:auto 15px;
 }
 .music-list{
	 display: flex;
	 flex-direction: row;
	 justify-content: flex-start;
	 width: 100%;
	 height:60px;
	 margin-top: 5px;
 }
 .music-list img{
	 margin:0 0 0 15px;
	 width: 50px;
	 height: 50px;
	 border-radius: 5px;
 }
.main-content .content{
	 /* display: flex;
	 justify-content: flex-start; */
	 margin-left: 10px;
	 margin-top: 5px;
 }
 .uni-drawer__content{
 	background-color: #151515;
 	
 }
 .uni-drawer__content{
 	background-color: #151515;
 	
 }
 .uni-drawer__content--visible img{
 	width: 30px;
 	height: 30px;
 }
</style>
